<template>
  <a class="col-12 navbar-brand text-center" href="#">小程序编辑</a>

  <body class="bd-layout bg-light m-2 p-2">
    <aside class="bd-sidebar card p-3">

        <div class="form-group ">
          <label for="ProgramName" class="col-form-label col-form-label-lg"
            >小程序名字</label
          >
          <div class="">
            <input
              type="text"
              class="form-control  bg-light"
              id="ProgramName"
              placeholder="输入小程序名字"
              v-model="programName"
            />
          </div>
        </div>
        <div class="form-group ">
          <label for="ProgramDescription" class="form-label col-form-label-lg"
            >小程序简介</label
          >
          <textarea
            class="form-control bg-light"
            id="ProgramDescription"
            rows="19"
            placeholder="输入小程序简介"
            v-model="programDiscription"
          ></textarea>
        </div>
        <button
          type="button"
          class="btn btn-lg  btn-primary"
          data-bs-toggle="modal"
          data-bs-target="#myModal"
          href="#"
          @click="upload"
        >
          提交
        </button>

    </aside>
    <main class="bd-main order-1">
      <button
        class="btn mt-3 ml-2 btn-lg btn-outline-primary"

        id="view-button"
        @click="preview"
      >
        预览
      </button>
      <div class="row m-2">
        <div class="bg-light card" style="width: 100%;border-radius:9px" :style="{display:viewing}">
          <div id="editor-view" class="editor-view m-2 p-2">
            <codemirror
              ref="myCm"
              class="editor"
              v-model="code"
              placeholder="Code gose here..."
              style="border-radius:9px"
              :style="{ height: '400px', width: '100%' }"
              :indent-with-tab="true"
              :tabSize="4"
              :extensions="extensions"
              :mode="text / html"
              @ready="log('ready', $event)"
              @change="onchange($event)"
            />
          </div>
        </div>
        <div class="bg-light card shadow-sm " style="width: 100%" :style="{display:viewing}">
          <iframe
            class="rounded-1 border border-2 bg-white"
            style="border-radius:9px"
            :style="{ height: '400px', width: '100%' }"
            id="view-box"
          ></iframe>
        </div>
      </div>
    </main>
  </body>
</template>

<script>
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";

import { ref } from "vue";
export default {
  components: {
    Codemirror,
  },
  setup() {
    const code = ref(
      `<html>\n\n<head>\n\n<style>\n\n</style>\n\n</head>\n\n<body>\n\n</body>\n\n</html>`
    );
    const extensions = [javascript(), oneDark];

    return {
      code,
      extensions,
      log: console.log,
    };
  },
  data() {
    return {
      viewing: false,
      editvalue: "",
      programName: "",
      programDiscription: "",
    };
  },
  methods: {
    preview() {
      
      var box = document.getElementById("editor-view");
      var view_box = document.getElementById("view-box");
      if (this.viewing == true) {
        this.viewing = false;
        document.getElementById("view-button").innerHTML = "预览";
        // view_box.setAttribute("style", "float: none; width:100%");
        view_box.setAttribute("srcdoc", "");
      } else {
        this.viewing = true;
        document.getElementById("view-button").innerHTML = "取消";
        // view_box.setAttribute("style", "float: left; width:50%");
        view_box.setAttribute("srcdoc", this.editvalue);
      }
    },
    onchange(event) {
      this.editvalue = event;
      var view_box = document.getElementById("view-box");
      if (1) {
        view_box.setAttribute("srcdoc", this.editvalue);
      }
    },
    upload() {
      if (
        this.programName == "" ||
        this.programDiscription == "" ||
        this.editvalue == ""
      ) {
        alert("名称或描述未填写，或小程序代码为空");
        return;
      }
      let formData = new FormData();
      formData.append("name", this.programName);
      formData.append("description", this.programDiscription);
      formData.append("file", this.editvalue);
      let str = sessionStorage.getItem("entity");
      let entity = JSON.parse(str);
      let userstr = sessionStorage.getItem("user");
      let user = JSON.parse(userstr);
      formData.append("parentId", entity.id);
      formData.append("userId", user.id);
      console.log(formData)
      this.axios
        .post("/program/new", formData, {
          "Content-type": "application/x-www-form-urlencoded",
        })
        .then(
          (res) => {
            alert("上传成功");
            console.log(res.data);
          },
          (err) => {
            alert("上传失败");
            console.log(err);
          }
        );
    },
  },
};
</script>

<style scoped>

.bd-layout {
  display: grid;
  gap: 1.5rem;
  grid-template-areas: "sidebar main";
  grid-template-columns: 1fr 3fr;
}

.bd-sidebar {
  margin: 0 -0.75rem 1rem;
}
</style>
